* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
}

.line {
  display: flex;
}
.line:nth-child(even) {
  transform: translateX(-5.5555555556vw);
}
.line:nth-child(n+2) {
  margin-top: -1.8518518519vw;
}

.item {
  flex-shrink: 0;
  width: 11.1111111111vw;
  height: 11.1111111111vw;
  background: #000;
  outline: 2px solid #fff;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}